var jsonData = null;

~function(){
    var xhr = new XMLHttpRequest;
    xhr.open('get',"json/json_text.txt",false);
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)){
            var val = xhr.responseText;
            jsonData = JSON.parse(val);
            
        }
        
    };
    xhr.send(null);
    

}();

console.log(jsonData);
var ulList = document.getElementById('imgList');
//数据绑定
~function(){
    for(var i = 0; i < jsonData.length; i++){
        var str = '';
        
        str = '<div class="bk_dfimg"> <img src="" alt=""></div><div class="text_box"><div class="text_title">'+jsonData[i].title+'</div><div class="text_desc">'+jsonData[i].desc+'</div></div>';

        var oli = document.createElement('li');
        oli.innerHTML = str;
        console.log(oli);
        ulList.appendChild(oli);

    }
}();

//图片绑定
function putImg(){
    var bk_dfimgs = document.querySelectorAll('.bk_dfimg');
    console.log(bk_dfimgs);
    for(var i = 0; i<bk_dfimgs.length;i++){
        if((bk_dfimgs[i].offsetTop + 150) < (document.documentElement.scrollTop + document.documentElement.clientHeight)){
            bk_dfimgs[i].querySelector('img').src = jsonData[i].img;
            bk_dfimgs[i].querySelector('img').style.display = 'block';
            fadeIn(bk_dfimgs[i].querySelector('img'));
            bk_dfimgs[i].style.backgroundImage = 'url("")';
            console.log(window.getComputedStyle(bk_dfimgs[i],null).backgroundImage);
        }
    }
    
}
putImg();
window.onscroll = putImg;

//改变图片的透明度达到出现的效果
function fadeIn(img) {
    var curOpacity = parseFloat(window.getComputedStyle(img,null).opacity);
    var timer = window.setInterval(function(){
        
        
        curOpacity = curOpacity + 0.01;
        img.style.opacity = curOpacity;
        if(curOpacity == 1){
            window.clearInterval(timer);
            return;
        }
    },1)
}